import dash
# import dash_core_components as dcc
# import dash_html_components as html
from dash import dcc
from dash import html
import plotly.express as px
import pandas as pd

tab_df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/c78bf172206ce24f77d6363a2d754b59/raw/c353e8ef842413cae56ae3920b8fd78468aa4cb2/usa-agricultural-exports-2011.csv')

def generate_table(dataframe, max_rows=10):
    return html.Table([
        html.Thead(
            html.Tr([html.Th(col) for col in dataframe.columns])
        ),
        html.Tbody([
            html.Tr([
                html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
            ]) for i in range(min(len(dataframe), max_rows))
        ])
    ])


colors = {
    'background':'#111111',
    'text':'#7FDBFF'
}

df = pd.DataFrame({
    "Fruit": ["Apples", "Oranges", "Bananas", "Apples", "Oranges", "Bananas"],
    "Amount": [4, 1, 2, 2, 4, 5],
    "City": ["SF", "SF", "SF", "Montreal", "Montreal", "Montreal"]
})

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")

fig.update_layout(
    plot_bgcolor=colors['background'],
    paper_bgcolor=colors['background'],
    font_color=colors['text']
)

graph_df = pd.read_csv('https://gist.githubusercontent.com/chriddyp/5d1ea79569ed194d432e56108a04d188/raw/a9f9e8076b837d541398e999dcbac2b2826a81f8/gdp-life-exp-2007.csv')

fig2 = px.scatter(graph_df,x="gdp per capita", y="life expectancy",
                 size="population", color="continent", hover_name="country",
                 log_x=True, size_max=60)

markdown_text = '''
### Dash and Markdown

Dash apps can be written in Markdown.
Dash uses the [CommonMark](http://commonmark.org/)
specification of Markdown.
Check out their [60 Second Markdown Tutorial](http://commonmark.org/help/)
if this is your first introduction to Markdown!
'''

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.H1(children="Hello Dash",
    style={
        'textAlign':'center',
        'color': colors['text']
    }),

    html.Div(children='''
        Dash : A web apllication framework for your data.
    ''',style={
        'textAlign':'center',
        'color':colors['text']
    }),

    dcc.Graph(
        id="example-graph",
        figure=fig
    ),
    html.H4(children='US Agriculture Exports (2011)'),
    generate_table(tab_df),

    dcc.Graph(
        id="life-exp-vs-gdp",
        figure=fig2
    ),

    dcc.Markdown(children=markdown_text),

    dcc.Dropdown(
        options=[
            {'label':'New York City','value':'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    ),

    html.Br(),
    
    html.Label('Multi-Select Dropdown'),

    dcc.Dropdown(
        options=[
                {'label': 'New York City', 'value': 'NYC'},
                {'label': u'Montréal', 'value': 'MTL'},
                {'label': 'San Francisco', 'value': 'SF'}
            ],
            value=['MTL', 'SF'],
            multi=True
    ),

    html.Br(),
    dcc.RadioItems(
        options=[
                {'label': 'New York City', 'value': 'NYC'},
                {'label': u'Montréal', 'value': 'MTL'},
                {'label': 'San Francisco', 'value': 'SF'}
            ],
            value='MTL'
    ),

    html.H6("Change the value in the text box to see callbacks in action!"),
    html.Div([
        "Input: ",
        dcc.Input(id="my-input", value="initial value", type="text")
    ]),
    html.Br(),
    html.Div(id="my-output")
    
],style={'padding':10,'flex':1})

@app.callback(
    Output(component_id="my-output", component_property="children"),
    Input(component_id="my-input",component_property="value")
)
def update_output_div(input_value):
    return f'Output: {input_value}'

if __name__ == "__main__":
    app.run_server(debug=True)


